/**
* author: zhanghuan
* created: 2020/08/03
* describe: 图表
*/
import React from 'react';
import ReactEcharts from 'echarts-for-react';
import './chart.less';



class Chart extends React.Component {
    constructor(props: any) {
        super(props);
        this.state = {

        }
    }

    componentDidMount() {
        console.log(321321)
    }

    getOption() {
        var colors = [
            "#438dff",
            "#fe693f",
            "#ffdf5e",
        ]

        let data = [{
            name: "XXXXXXXXXXXXXXXXXXX集团",
            value: {
                label: '借款人',
                numLabel: '资金支付共1300万'
            },
            label: {
                triggerEvent: true,
                position: "inside",
                rotate: 0,
                formatter: [
                    '{a|借款人}',
                    '{b|XXXXXXXXXXXXXX\nXXXXX集团}',
                    '{c|资金支付共1300万}'
                ].join('\n'),
                rich: {
                    a: {
                        color: '#fff',
                        fontSize: 14,
                        lineHeight: 50,
                    },
                    b: {
                        color: '#fff',
                        fontSize: 16,
                    },
                    c: {
                        color: '#fff',
                        fontSize: 14,
                        lineHeight: 50,
                    },
                },
            },

            symbolSize: 200,
            lineStyle: {
                color: '#0a5be2'
            },
            itemStyle: {
                borderColor: '#0a5be2',
                color: '#0a5be2'
            },
            children: [{
                name: "支付集中度前10名收款方",
                value: {
                    numLabel: '资金支付600万'
                },
                label: {
                    position: "inside",
                    rotate: 0,
                    formatter: [
                        '{a|支付集中度前\n10名收款方}',
                        '{b|资金支付600万}'
                    ].join('\n'),
                    rich: {
                        a: {
                            color: '#fff',
                            fontSize: 14,
                            lineHeight: 18,
                        },
                        b: {
                            color: '#fff',
                            fontSize: 14,
                            lineHeight: 30,
                        },
                    },
                },
                symbolSize: 130,
                lineStyle: {
                    color: colors[0]
                },
                itemStyle: {
                    borderColor: 'transparent',
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#e5efff' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#5597fc' // 100% 处的颜色
                        }],
                    }
                },
                children: [{
                    name: "内蒙古科盛太阳能科技有限责任公司",
                    value: {
                        numLabel: '资金支付10万'
                    },
                    label: {
                        formatter: [
                            '{j| }  ',
                            '{k| }',
                            '{a|  内蒙古科盛太阳能科技有限责任公司}',
                        ].join(''),
                        rich: {
                            j: {
                                width: 10,
                                height: 10,
                                backgroundColor: colors[1],
                                borderRadius: 5
                            },
                            k: {
                                width: 10,
                                height: 10,
                                backgroundColor: colors[2],
                                borderRadius: 5
                            },
                            a: {
                                color: '#666666',
                                fontSize: 12,
                            },
                        },
                    },
                    children: [{
                        name: "内蒙古科盛太阳能XXXXX公司1",
                        value: {
                            numLabel: '资金支付10万'
                        },
                    }, {
                        name: "内蒙古科盛太阳能XXXXX公司2",
                        value: {
                            numLabel: '资金支付10万'
                        },
                        children: [{
                            name: "内蒙古科盛太阳能XXXXX2公司1",
                            value: {
                                numLabel: '资金支付10万'
                            },
                        },]
                    }]
                }, {
                    name: "山东电力建设第三工程公司电厂项目部",
                    value: {
                        numLabel: '资金支付10万'
                    },
                    label: {
                        formatter: [
                            '{k| }',
                            '{a|  山东电力建设第三工程公司电厂项目部}',
                        ].join(''),
                        rich: {
                            k: {
                                width: 10,
                                height: 10,
                                backgroundColor: colors[2],
                                borderRadius: 5
                            },
                            a: {
                                color: '#666666',
                                fontSize: 12,
                            },
                        },
                    },
                }, {
                    name: "包头市博悦仪表电缆有限公司",
                    value: {
                        numLabel: '资金支付10万'
                    },
                }, {
                    name: "西宁利星电力设备有限公司",
                    value: {
                        numLabel: '资金支付10万'
                    },
                }]
            }, {
                name: "支付本人或关联方",
                value: {
                    numLabel: '资金支付200万'
                },
                label: {
                    position: "inside",
                    rotate: 0,
                    formatter: [
                        '{a|支付本人或\n关联方}',
                        '{b|资金支付200万}'
                    ].join('\n'),
                    rich: {
                        a: {
                            color: '#fff',
                            fontSize: 14,
                            lineHeight: 18,
                        },
                        b: {
                            color: '#fff',
                            fontSize: 14,
                            lineHeight: 30,
                        },
                    },
                },
                symbolSize: 130,
                lineStyle: {
                    color: colors[1]
                },
                itemStyle: {
                    borderColor: 'transparent',
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#ffd7d5' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#fd683e' // 100% 处的颜色
                        }],
                    }
                },
                children: [{
                    name: "XXXXXXXXXXXXXXXX集团[借款人本人]",
                    value: {
                        numLabel: '资金支付10万'
                    },
                    label: {
                        formatter: [
                            '{a|XXXXXXXXXXXXXXXX集团}',
                            '{b|[借款人本人]}'
                        ].join(''),
                        rich: {
                            a: {
                                color: '#666666',
                                fontSize: 12,
                            },
                            b: {
                                color: colors[1],
                                fontSize: 12,
                            },
                        },
                    }
                }, {
                    name: "XXXXXXXXXXXXXXXX集团[同集团子公司]",
                    value: {
                        numLabel: '资金支付10万'
                    },
                    label: {
                        formatter: [
                            '{a|XXXXXXXXXXXXXXXX集团}',
                            '{b|[同集团子公司]}'
                        ].join(''),
                        rich: {
                            a: {
                                color: '#666666',
                                fontSize: 12,
                            },
                            b: {
                                color: colors[1],
                                fontSize: 12,
                            },
                        },
                    },
                    children: [{
                        name: "内蒙古山路XXXXX有限公司1",
                        value: {
                            numLabel: '资金支付10万'
                        },
                    }, {
                        name: "内蒙古山路XXXXX有限公司2",
                        value: {
                            numLabel: '资金支付10万'
                        },
                        children: [{
                            name: "内蒙古山路XXX能源有限公司2",
                            value: {
                                numLabel: '资金支付10万'
                            },
                        },]
                    }]
                }, {
                    name: "XXXXXXXXXXXXXXXX集团[担保公司]",
                    value: {
                        numLabel: '资金支付10万'
                    },
                    label: {
                        formatter: [
                            '{a|XXXXXXXXXXXXXXXX集团}',
                            '{b|[担保公司]}'
                        ].join(''),
                        rich: {
                            a: {
                                color: '#666666',
                                fontSize: 12,
                            },
                            b: {
                                color: colors[1],
                                fontSize: 12,
                            },
                        },
                    },
                }, {
                    name: "XXXXXXXXXXXXXXXX集团[同集团子公司]",
                    value: {
                        numLabel: '资金支付10万'
                    },
                    label: {
                        formatter: [
                            '{a|XXXXXXXXXXXXXXXX集团}',
                            '{b|[同集团子公司]}'
                        ].join(''),
                        rich: {
                            a: {
                                color: '#666666',
                                fontSize: 12,
                            },
                            b: {
                                color: colors[1],
                                fontSize: 12,
                            },
                        },
                    },
                }]
            }, {
                name: "支付用途可疑",
                value: {
                    numLabel: '资金支付500万'
                },
                label: {
                    position: "inside",
                    rotate: 0,
                    formatter: [
                        '{a|支付用途可疑}',
                        '{b|资金支付500万}'
                    ].join('\n'),
                    rich: {
                        a: {
                            color: '#fff',
                            fontSize: 14,
                            lineHeight: 18,
                        },
                        b: {
                            color: '#fff',
                            fontSize: 14,
                            lineHeight: 30,
                        },
                    },
                },
                symbolSize: 130,
                lineStyle: {
                    color: colors[2]
                },
                itemStyle: {
                    borderColor: 'transparent',
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#fef5d8' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#ffb009' // 100% 处的颜色
                        }],
                    }
                },
                children: [{
                    name: "内蒙古XXXXXXXX有限公司1",
                    value: {
                        numLabel: '资金支付10万'
                    },
                }, {
                    name: "内蒙古XXXXXXXX有限公司2",
                    value: {
                        numLabel: '资金支付10万'
                    },
                }, {
                    name: "内蒙古XXXXXXXX有限公司3",
                    value: {
                        numLabel: '资金支付10万'
                    },
                }, {
                    name: "内蒙古XXXXXXXX有限公司4",
                    value: {
                        numLabel: '资金支付10万'
                    },
                }]
            },]
        }];



        var handle = function handleData(data: any, index: number, color = '#00f6ff') {
            //index标识第几层
            return data.map((item: any, index2: number) => {
                //计算出颜色
                color = colors[index];
                // 设置label
                item.label = {
                    position: "bottom",
                    rotate: 0,
                    color: '#666666',
                    fontSize: 12,
                    ...item.label
                }
                // 设置label大小
                item.symbolSize = 13
                // 设置线条颜色
                item.lineStyle = {
                    color: color
                }

                if (item.children) { //存在子节点
                    item.itemStyle = {
                        borderColor: color,
                        color: color
                    };
                    item.children = handle(item.children, index, color)
                } else { //不存在
                    item.itemStyle = {
                        color: '#fff',
                        borderColor: color
                    };
                }
                return item
            })
        }

        data[0].children.forEach((ite, i) => {
            ite.children = handle(ite.children, i)
        })

        var option = {
            type: "tree",
            backgroundColor: "#fff",
            toolbox: { //工具栏
                show: true,
                iconStyle: {
                    borderColor: "#03ceda"
                },
                feature: {
                    restore: {}
                }
            },
            tooltip: { //提示框
                trigger: "item",
                triggerOn: "mousemove",
                backgroundColor: "rgba(1,70,86,1)",
                borderColor: "rgba(0,246,255,1)",
                borderWidth: 0.5,
                textStyle: {
                    fontSize: 10
                }
            },
            series: [{
                type: "tree",
                hoverAnimation: true, //hover样式
                data: data,
                top: 0,
                bottom: 0,
                left: 0,
                right: 0,
                layout: "radial",
                symbol: "circle",
                symbolSize: 10,
                nodePadding: 20,
                animationDurationUpdate: 750,
                expandAndCollapse: true, //子树折叠和展开的交互，默认打开
                initialTreeDepth: 2,
                roam: true, //是否开启鼠标缩放和平移漫游。scale/move/true
                focusNodeAdjacency: true,
                itemStyle: {
                    borderWidth: 1,
                },
                label: { //标签样式
                    color: "#fff",
                    fontSize: 14,
                    fontFamily: "SourceHanSansCN",
                    //position: "top",
                    //rotate: 0,
                },
                lineStyle: {
                    width: 1,
                    curveness: 0.5,
                }
            }]
        };
        return option
    }

    onEvents() {
        return {
            'dblclick': this.onChartClick
        }
    }

    onChartClick(params: any) {
        console.log(params)
    }


    render() {
        return (
            <div id="chart">
                <ReactEcharts option={this.getOption()} onEvents={this.onEvents()} />
            </div>
        )
    }
}

export default Chart;